<template>
	<!-- 引入模板 -->
	<import src="../../lib/wxParse/wxParse.wxml" />
	<view class="page_post_detail">
		<!-- 帖子标题等内容 -->
		<view class="top_content">
			<view class="post_title">
				<text>{{ event.title }}</text>
			</view>
			<view class="post_info_list">
				<navigator
					:url="`/pages/club-detail/club-detail?club_id=${event.club_id}`"
					class="author_name"
				>
					<text class="the_val">{{ event.club_name }}</text>
				</navigator>
				<view class="post_time">
					<text class="the_tag">发布于</text>
					<text class="the_val">{{ formatUTC(event.created_at) }}</text>
				</view>
			</view>
			<view class="post_info_list">
				<view class="post_time">
					<text>活动状态：{{ statusText }}</text>
				</view>
			</view>
		</view>
		<!-- 正文内容 -->
		<view class="post_content">
			<view v-html="event.description"> </view>
			<view class="content_title">
				<view>
					<text>开始时间：</text>
					<text>{{ formatUTC(event.start_date) }}</text>
				</view>
				<view>
					<text>结束时间：</text>
					<text>{{ formatUTC(event.end_date) }}</text>
				</view>
				<view>
					<text>当前报名人数：</text>
					<text
						>{{ event.registered_count }}/{{ event.registration_limit }}</text
					>
				</view>
			</view>
		</view>
		<!-- 底部赞同、评论等操作 -->
		<view class="footer_option">
			<view class="left_like">
				<van-button
					v-if="showRegister"
					bindtap="handleLike"
					class="left_like"
					type="primary"
					size="small"
					color="blue"
					plain
					@click="handleRegister"
					>报名</van-button
				>
				<van-button
					v-else-if="showCancelRegister"
					bindtap="handleLike"
					class="left_like"
					type="primary"
					size="small"
					color="blue"
					plain
					@click="handleCancelRegister"
					>取消报名</van-button
				>
				<van-button
					v-else
					bindtap="handleLike"
					class="left_like"
					type="primary"
					size="small"
					disabled
					>已截止</van-button
				>
			</view>
			<view class="right_options"> </view>
		</view>

		<!-- 评论区 -->
	</view>

	<van-dialog id="van-dialog" />
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { computed, nextTick, onMounted, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

import { formatUTC } from '@/utils/format.js'
import useEventStore from '@/store/event.js'
import useLoginStore from '@/store/login.js'

const eventStore = useEventStore()
const loginStore = useLoginStore()
const { event, eventMemberList } = storeToRefs(eventStore)
const { userInfo } = storeToRefs(loginStore)
onLoad((option) => {
	const { event_id } = option
	eventStore.searchEventByIdAction(event_id)
	eventStore.searchJoinUserAction(event_id)
})

// 渲染活动状态
// 渲染状态
const statusText = computed(() => {
	if (event.value.status === 'approved') {
		return '未开始'
	} else if (event.value.status === 'ongoing') {
		return '进行中'
	} else if (event.value.status === 'finished') {
		return '已结束'
	} else if (event.value.status === 'pending') {
		return '审核中'
	} else {
		return '已拒绝'
	}
})
// 显示报名
const showRegister = computed(() => {
	if (
		(event.value.status === 'approved' || event.value.status === 'ongoing') &&
		!isRegister.value &&
		Number(event.value.registered_count) <
			Number(event.value.registration_limit)
	) {
		return true
	} else {
		return false
	}
})

// 显示取消报名
const showCancelRegister = computed(() => {
	if (
		(event.value.status === 'approved' || event.value.status === 'ongoing') &&
		isRegister
	) {
		return true
	}
	return false
})

// 报名还是取消报名
const isRegister = computed(() => {
	return eventMemberList.value.some(
		(item) => item.user_id === userInfo.value.user_id
	)
})

// 报名
function handleRegister() {
	eventStore.registerEventAction(event.value.id, userInfo.value.user_id)
}

// 取消报名
function handleCancelRegister() {
	eventStore.cancelRegisterAction(event.value.id, userInfo.value.user_id)
}
</script>

<style lang="less" scoped>
page {
	background-color: #fff;
}

.page_post_detail {
	// 详情页头部信息
	.top_content {
		// height: 200px;
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
		background-color: #fff;
		z-index: 99;
		margin-bottom: 10px;
		padding: 15rpx;

		.post_title {
			display: flex;
			justify-content: space-between;
			font-size: 40rpx;
			font-weight: 700;
			margin-bottom: 20rpx;
			.event_status {
				font-size: 30rpx;
				color: rgba(0, 0, 0, 0.6);
			}
		}

		.post_info_list {
			display: flex;

			.author_name,
			.view_count,
			.like_count,
			.post_time {
				margin-right: 20rpx;
				font-size: 27rpx;
				color: rgba(0, 0, 0, 0.6);
				margin: 20rpx 0;
				padding-right: 10rpx;
				display: flex;
				align-items: center;
				.the_tag {
					padding-right: 10rpx;
				}

				.the_val {
				}
			}
		}
	}

	//   帖子内容信息
	.post_content {
		padding: 35rpx;
		min-height: 400rpx;
		background-color: #fff;
		font-size: 32rpx;
		line-height: 50rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.content_title {
			font-size: 27rpx;
			color: rgba(0, 0, 0, 0.6);
		}
	}

	.footer_option {
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		border-top: 0.5px solid #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		.left_like {
			font-size: 35rpx;
		}

		.right_options {
			.share,
			.collection,
			.comment {
				font-weight: 700;
				color: #545454;
				font-size: 50rpx;
				margin-right: 30rpx;
			}
		}
	}
}

// 帖子评论
.comment_wrap {
	// box-shadow: 0 0rpx 5px rgba(0, 0, 0, .12);
	margin-top: 10px;
	padding: 20rpx;
	padding-bottom: 100rpx;
	position: relative;
	.scroll_view {
		height: 500rpx;
		.comment_item {
			display: flex;
			padding-left: 25rpx;
			margin-bottom: 30rpx;

			.user_avatar {
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}

			.comment_content_wrap {
				flex: 1;

				.username {
					font-weight: 700;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.content {
					font-size: 27rpx;
					color: #444;
				}
			}

			.like_wrap {
				margin-top: 25rpx;
				margin-left: 20rpx;
				width: 50rpx;
				height: 50rpx;
				font-size: 28rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: var(--lightTextColor);

				.like_icon {
					font-size: 35rpx;
				}
			}

			// 点赞后的激活样式
			.active {
				color: var(--themeColor);
			}
		}
	}

	.send_comment {
		position: absolute;
		width: 100%;
		height: 80rpx;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		box-sizing: border-box;

		.send_input {
			width: 600rpx;
		}
		.send_btn {
			width: 85rpx;
		}
	}
}
</style>
